<template>
  <span :class="iconStyle"></span>
</template>
<script lang="ts">
import Vue from "vue";
import { ref } from "@vue/composition-api";
// 枚举出图标的类型
enum iconType {
  decrease,
  discount,
  special,
  invoice,
  guarantee,
}
export default Vue.extend({
  props: {
    iconType: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const iconStyle = ref("");
    if (typeof props.iconType === "number") {
      const iconId: number = props.iconType;
      iconStyle.value = "icon-base " + iconType[iconId];
    }
    return {
      iconStyle,
    };
  },
});
</script>
<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';

.icon-base {
  background-size: cover;
  display: inline-block;
  width: 12px;
  height: 12px;

  &.decrease {
    query-bg('decrease_1');
  }

  &.discount {
    query-bg('discount_1');
  }

  &.special {
    query-bg('special_1');
  }

  &.invoice {
    query-bg('invoice_1');
  }

  &.guarantee {
    query-bg('guarantee_1');
  }
}
</style>
